Ext.define('sid.cv.ResumeView', {
	extend: 'Ext.Panel',
	requires: ['Ext.Panel', 'sid.cv.RecordView'],
	alias: 'widget.sid.cv.resumeview',
	
	store: undefined,
	
	recordId: undefined,
	
	layout: {
		type: 'hbox',
		align: 'stretch'
	},
	
	focusInterest: function(id) {
		Ext.fly(this.getComponent(1).getTargetEl()).addCls('reduced');
		
		Ext.each(Ext.fly(this.getComponent(1).getEl()).query('.interest'), function(node) {
			Ext.fly(node).removeCls('focused');
		});
		
		Ext.each(Ext.fly(this.getComponent(1).getEl()).query('.interest-' + id), function(node) {
			Ext.fly(node).addCls('focused');
		});
	},
	
	initComponent: function() {
		var me = this;
		
		Ext.apply(this, {
			items: [{
				flex: 1,
				xtype: 'sid.cv.recordview',
				autoScroll: true,
				tplId: 'template-resume-document',
				store: this.store,
				recordId: this.recordId,
				fieldSelector: '.interest',
				selectionListeners: {
					click: function(event, target) {
						console.log(target);
						me.focusInterest(target.getAttribute('name'));
					}
				}
			}, {
				flex: 1,
				xtype: 'sid.cv.recordview',
				autoScroll: true,
				tplId: 'template-resume-document',
				store: this.store,
				recordId: this.recordId,
				fieldSelector: '.interest'
			}]
		});
		
		sid.cv.ResumeView.superclass.initComponent.call(this);
		
		var siblingItems = function(item) {
			/* Note the mixed collection. */
			return Ext.Array.difference(me.items.items, [item]);
		};
		
		/* Add scroll synchronizers. */
		this.items.each(function(item) {
			/* Add managed listeners to each item that wait for rendering to complete. */
			this.mon(item, {
				render: function(scrolledItem) {
					/* Once rendered, the container element becomes available. */
					var scrolledItemEl = Ext.get(scrolledItem.getEl());
					
					/* Propagate scroll position to sibling items. */
					scrolledItem.mon(scrolledItemEl, {
						scroll: function() {
							/* Iterate all siblings and adjust their position. */
							Ext.each(siblingItems(scrolledItem), function(siblingItem) {
								var siblingItemEl = Ext.get(siblingItem.getEl());
								
								/* This method does not trigger the scroll event. There is no need to suspend. (And,
								 * in fact, events cannot be suspended on Ext.core.Element.) */
								siblingItemEl.scrollTo('top', scrolledItemEl.getScroll().top);
							});
						}
					});
				}
			});
			
		}, this);
	}
});
